// ✨✨使用 ScrollTrigger 插件
// iPhone15 概览页的效果是当页面滚动到指定的区域, 按钮才会出现, 页面离开指定区域则按钮消失

gsap.registerPlugin(ScrollTrigger);

// ✨ScrollTrigger 的出现, 就是为了进行 “视图驱动动画” 效果!!!
const tl = gsap.timeline({
  scrollTrigger: {
    trigger: ".box", // 用于指定触发时间线动画的元素
    start: "top 80%", // 开始位置
    onLeaveBack: () => {
      // 🔥当用户往回滚动时, 触发的回调函数 ->让整个时间线反转 (即: 动画能倒着进行！！！)
      tl.killTweensOf("#blue-circle").reverse();
    },
  },
});

// 3.2 gsap动画库使用:
tl.from(["#btn", "#blue-circle"], {
  scale: 0,
  duration: 1,
  ease: "power1.in", // 表示动画将 “先慢后快”
  stagger: 0.5, // 表示 "#blue-circle" 动画比 "#btn" 晚开始 0.5s...
})
  .to("#blue-circle", {
    scale: 0,
  })
  .from("#icon", {
    scale: 0,
  })
  .to("#btn", {
    width: 200,
  })
  // ---补间动画---
  .to(
    "#icon",
    {
      x: 50,
    },
    "<"
  )
  // ---补间动画---
  .from(".text", {
    opacity: 0,
    x: -12,
  });
